---
title: Radio
package: "@chakra-ui/radio"
image: "components/radio.svg"
description:
  Radios are used when only one choice may be selected in a series of options.
---

Radios are used when only one choice may be selected in a series of options.

<ComponentLinks
  theme={{ componentName: "radio" }}
  github={{ package: "radio" }}
  npm={{ package: "@chakra-ui/radio" }}
/>

<carbon-ad></carbon-ad>

Native HTML radios are 100% accessible by default, so we used a
[very common CSS technique](https://dev.to/lkopacz/create-custom-keyboard-accessible-radio-buttons-22eh)
to style the radio.

## Import

```js
import { Radio, RadioGroup } from "@chakra-ui/react"
```

### Usage

```jsx
function RadioExample() {
  const [value, setValue] = React.useState("1")
  return (
    <RadioGroup onChange={setValue} value={value}>
      <Stack direction="row">
        <Radio value="1">First</Radio>
        <Radio value="2">Second</Radio>
        <Radio value="3">Third</Radio>
      </Stack>
    </RadioGroup>
  )
}
```

### Radio with custom color

You can override the `colorScheme` of the Radio to any color key specified in
`theme.colors`.

```jsx
<RadioGroup defaultValue="2">
  <Stack spacing={5} direction="row">
    <Radio colorScheme="red" value="1">
      Radio
    </Radio>
    <Radio colorScheme="green" value="2">
      Radio
    </Radio>
  </Stack>
</RadioGroup>
```

### Radio sizes

The checkbox comes with 3 sizes.

```jsx
<Stack>
  <Radio size="sm" name="1" colorScheme="red">
    Radio
  </Radio>
  <Radio size="md" name="1" colorScheme="green">
    Radio
  </Radio>
  <Radio size="lg" name="1" colorScheme="orange" defaultChecked>
    Radio
  </Radio>
</Stack>
```

### Disabled radios

```jsx
<RadioGroup defaultValue="1">
  <Stack>
    <Radio value="1" isDisabled>
      Checked
    </Radio>
    <Radio value="2">Unchecked</Radio>
    <Radio value="3">Unchecked</Radio>
  </Stack>
</RadioGroup>
```

### Horizontal alignment

```jsx
<RadioGroup defaultValue="1">
  <Stack spacing={4} direction="row">
    <Radio value="1" isDisabled>
      Radio 1
    </Radio>
    <Radio value="2">Radio 2</Radio>
    <Radio value="3">Radio 3</Radio>
  </Stack>
</RadioGroup>
```

### Invalid Radio

```jsx
<Radio isInvalid>Radio</Radio>
```

### Custom Radio Buttons

In some cases, you might need to create components that work like radios but
don't look like radios. Chakra exports `useRadio`, and `useRadioGroup` hooks to
help with this scenario. Here's what you need to do:

1. Create a component that consumes the `useRadio` hook.
2. Use the `useRadioGroup` hook to control a group of custom radios.

```jsx manual=true
// 1. Create a component that consumes the `useRadio` hook
function RadioCard(props) {
  const { getInputProps, getCheckboxProps } = useRadio(props)

  const input = getInputProps()
  const checkbox = getCheckboxProps()

  return (
    <Box as="label">
      <input {...input} />
      <Box
        {...checkbox}
        cursor="pointer"
        borderWidth="1px"
        borderRadius="md"
        boxShadow="md"
        _checked={{
          bg: "teal.600",
          color: "white",
          borderColor: "teal.600",
        }}
        _focus={{
          boxShadow: "outline",
        }}
        px={5}
        py={3}
      >
        {props.children}
      </Box>
    </Box>
  )
}

// Step 2: Use the `useRadioGroup` hook to control a group of custom radios.
function Example() {
  const options = ["react", "vue", "svelte"]

  const { getRootProps, getRadioProps } = useRadioGroup({
    name: "framework",
    defaultValue: "react",
    onChange: console.log,
  })

  const group = getRootProps()

  return (
    <HStack {...group}>
      {options.map((value) => {
        const radio = getRadioProps({ value })
        return (
          <RadioCard key={value} {...radio}>
            {value}
          </RadioCard>
        )
      })}
    </HStack>
  )
}

render(<Example />)
```

### Note about `name` prop

We recommend passing the `name` prop to the `RadioGroup` component, instead of
passing it to each `Radio` component. By default, the `name` prop of the
RadioGroup takes precedence.

```jsx live=false
// Do this ✅
<RadioGroup name="form-name">
  <Radio>Radio 1</Radio>
  <Radio>Radio 2</Radio>
</RadioGroup>

// Don't do this ❌
<RadioGroup >
  <Radio name="form-name">Radio 1</Radio>
  <Radio name="form-name">Radio 2</Radio>
</RadioGroup>
```

## Props

<PropsTable of="Radio" />
